{include file="public/header"}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>核销</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css" />
    <style>
        html,body {
            width: 100%;
            background:rgba(238,238,238,1);
        }

        .container{
            padding-top:30px;
            padding-bottom:94px;
        }


        .box{
            width:1200px;
            height:auto;
            margin: 0 auto;
            padding-bottom:10px;
            background-color:#FFFFFF;
        }

        .box_1{
            padding-left:30px;
            padding-right:30px;
            height: 66px;
        }


        table{
            width:100%;
            padding-left:30px;
            padding-right:30px;
            text-align:left;
            border-spacing:0;
            color:#666666;
            font-size:12px;
        }

        th{
            max-width:50px;
            height:50px;
            line-height:20px;
            background-color:#F7F7F7;
            word-wrap:break-word;
            /*padding-left: 2px;*/
            /*padding-right: 2px;*/
        }
        th:nth-child(1){
            padding-left:30px;
        }
        th:nth-child(13){
            max-width:90px;
        }

        td{
            max-width:50px;
            height:50px;
            line-height:20px;
            border-bottom:1px solid #E9E9E9;
            word-wrap:break-word;
        }
        td:nth-child(1){
            padding-left:30px;
        }

        td:nth-child(13){
            max-width:90px;
        }


        .pagination{
            /*height: 28px !important;*/
            /*line-height:28px;*/
            /*margin-top:30px;*/
            /*padding-right:33px;*/
            color:#999;
            font-size:12px;
        }
        .pagination div{
            margin-left:5px;
            margin-right:5px;
        }
        .pagination div:nth-child(2){
            margin-right:15px;
        }
        .pagination div:nth-child(6){
            color:#282828;
        }
        .pagination div:nth-child(8){
            margin-left:15px;
        }

        .inputttt{
            margin-top:19px;
            width:230px;
            height:28px;
            background:rgba(255,255,255,1);
            border-radius:3px;
            border:1px solid rgba(244,244,244,1);
            color:rgba(204,204,204,1);
            font-size:12px;
        }

        .inputrenwu {
            padding-left: 11px;
            box-sizing: border-box;
            display: inline-block !important;
            width: 200px !important;
            height: 28px !important;
            outline: none;
            border-width: 0;
        }

        .inputtttImg{
            width: 16px;
            height: 16px;
            margin-top:6px;
            margin-left:5px;
        }


        .selectttt22{
            margin-top:19px;
            margin-left:30px;
            width:68px;
            height:28px;
            background:dodgerblue;
            border-radius:3px;
            text-align: center;
            line-height:28px;
            font-size:12px;
            font-weight:400;
            color:rgba(255,255,255,1);
        }

        .selectttt3{
            margin-top:19px;
            width:100px;
            height:28px;
            background:rgba(0,101,240,1);
            border-radius:3px;
            text-align: center;
            line-height:28px;
            font-size:12px;
            font-weight:400;
            color:rgba(255,255,255,1);float: left;
        }

        .hidden{
            display: none
        }
        .ovfHiden{overflow: hidden;height: 100%;}
    </style>
</head>
<body>
<div class="tt_top3">
    <div class="tt_top33">卡券管理</div>
</div>
<div class="container">
    <div class="box">
        <form id="alls">
            <div class="box_1 flex-wrap">
                <!--<div class="box_1Name">优惠券名称/券码/手机号</div>-->
                <div class="inputttt flex-wrap">
                    <input type="text" id="namec" class="inputrenwu" name="search[]" value="{$search.0?:''}" placeholder="优惠券名称/券码/手机号">
                    <img src="__IMG__/search.png" class="inputtttImg"/>
                </div>

                <div class="selectttt22 hand_icon" id="search">搜索</div>
                <div class="flex-con"></div>
                <div class="selectttt3" onclick="hexiao();" style="cursor: pointer;margin-left: 10px">核销卡券</div>
            </div>

        </form>
        <!--<div>-->
        <div class="box1" style="width: 100%;overflow-x: scroll;">
            <table style="width: 100%;overflow-x: scroll;">
                <tr>
                    <th>序号</th>
                    <th>优惠券图片</th>
                    <th>优惠券名称</th>
                    <th>优惠券二维码</th>
                    <th>券码</th>
                    <th>核销用户</th>
                    <th>用户id</th>
                    <th>手机号</th>
                    <th>核销时间</th>
                </tr>
                {if condition="!$data->isEmpty()"}
                {foreach name="data" item="vo"}
                <tr>
                    <td>{:xuHao($key,$pages)}</td>
                    <td>{if $vo.coupon_image}<img src="{$vo.coupon_image}" class="tupain" width="50" height="50" />{else /}无{/if}</td>
                    <td>{$vo.coupon_name?:''}</td>
                    <td>{if $vo.mc_ercode}<img src="{$vo.mc_ercode}" class="tupain" width="50" height="50" />{else /}无{/if}</td>
                    <td>{$vo.mc_code?:''}</td>
                    {if $vo.mc_send==1}
                        <td>{$vo.user_username ?: ''}</td>
                        <td>{$vo.user_id ?: ''}</td>
                        <td>{$vo.user_phone ?: ''}</td>
                    {else /}
                        <td>{$vo.user_username2 ?: ''}</td>
                        <td>{$vo.user_id2 ?: ''}</td>
                        <td>{$vo.user_phone2 ?: ''}</td>
                    {/if}

                    <td>{$vo.mc_use_time ?: ''}</td>
                </tr>
                {/foreach}
                {else/}
                <tr>
                    <td colspan="13" style="text-align: center;">暂无数据 ！</span></td>
                </tr>
                {/if}

            </table>
        </div>
        <!--</div>-->
        <ul class="pagination flex-con" style="display: flex;justify-content: flex-end;">
            {$data->render()}
        </ul>
    </div>
</div>
<div class="all_div" style="display:none;width: 100%;height: 100%;position: fixed;z-index: 100;background: rgba(0,0,0,0.5);top: 0;left: 0;padding: 0;margin: 0;"></div>
<!--核销输入 start -->
<style>
    .container1{
        width:379px;
        height:187px;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
        border-radius:4px;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        z-index: 999;
    }
    .contentTitle{
        font-size:16px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:24px;
        padding-top:16px;
        padding-bottom:20px;
        text-align: center;
    }
    .couponshuru{
        background-color: transparent;
        height: 40px;
        width:300px;
        margin-left:39px;
        margin-bottom:30px;
        padding-left: 0;
        padding-right: 0;
        font-weight: 400;
        color: #999999;
        font-size: 12px;
        border-radius:2px;
        border:1px solid rgba(238,238,238,1);
    }
    .couponshuru::-webkit-input-placeholder{
        font-weight: 400;
        color: #999999;
        text-align:center;
    }
    .btn1{
        display:inline-block;
        width:65px;
        height:32px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(217,217,217,1);
        font-size:14px;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        line-height:32px;
        border-radius:5px;
        margin-left:120px;
        margin-right:8px;
        text-align:center;
        cursor: default;
    }
    .btn2{
        display:inline-block;
        width:65px;
        height:32px;
        background:rgba(42,99,231,1);
        font-size:14px;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:32px;
        text-align:center;
        border-radius:5px;
        cursor: default;
    }
</style>
<div class="container1 hidden">
    <div class="contentTitle">核销卡券</div>
    <input type="text" class="couponshuru" placeholder="请输入卡券名称" />
    <div>
        <div class="btn1">取 消</div>
        <div class="btn2">确 定 </div>
    </div>
</div>
<!--核销输入  end -->
<!--核销成功 start -->
<style>

    .container2{
        width:380px;
        height:330px;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
        border-radius:4px;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        z-index: 999;
    }
    .contentTitle2{
        font-size:16px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:24px;
        padding-top:20px;
        padding-bottom:33px;
        text-align: center;
    }
    .closee{
        position:absolute;
        top:21px;
        right:22px;
        width:13px;
        height:13px;
    }
    .success{
        display:block;
        width:90px;
        height:90px;
        margin:0 auto;
    }
    .tips1{
        font-size:18px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:25px;
        margin-top:27px;
        margin-bottom:16px;
        text-align: center;
    }
    .tips2{
        font-size:14px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:20px;
        text-align: center;
    }
</style>
<div class="container2 hidden">
    <div class="contentTitle2">核销结果</div>
    <img src="__IMG__/closee.png" class="closee" />
    <img src="__IMG__/result1.png" class="success" />
    <div class="tips1">核销成功</div>
    <div class="tips2">券码：12345678</div>
</div>
<!--核销成功  end -->
<div class="all_div2" style="display:none;width: 100%;height: 100%;position: fixed;z-index: 100;background: rgba(0,0,0,0.5);top: 0;left: 0;padding: 0;margin: 0;"></div>
<div class="img_big" style="position: fixed;width: 100%;top: 25%;margin: 0 auto;z-index: 99999;text-align: center;display: none;">
    <img src="" style="max-height: 600px" />
</div>
<a href="#miao" id="gomaodian"></a>
</body>
{include file="public/footer"}
<script type="text/javascript" src="__JS__/api.js"></script>
<script type="text/javascript">

    /*筛选*/
    $("#search").click(function () {
        var data = $("#alls").serialize();
        window.location.href = '/shop/Couponuse/homePage?' + data;
    });
    //放大图片
    $('.tupain').click(function (event) {
        $('#gomaodian').trigger('click');
        var src = $(this).attr('src');
        $('.img_big img').attr('src',src);
        $('.img_big').css('display','block');
        $('.all_div2').css('display','block');
//    $('html,body').addClass('ovfHiden');
        event.stopPropagation();
    })
    $('.all_div2,.img_big').click(function (event) {
        $('.all_div2').css('display','none');
        $('.img_big').css('display','none');
//    $('html,body').removeClass('ovfHiden');
        event.stopPropagation();
    })
</script>
<script>
    function hexiao() {
        $('.container1').removeClass('hidden');
        $('.all_div').css('display','block');
        $('html,body').addClass('ovfHiden');
    }
    $('.btn1').click(function () {
        $('.container1').addClass('hidden');
        $('.all_div').css('display','none');
        $('html,body').removeClass('ovfHiden');
    });
    $('.closee').click(function () {
        $('.container2').addClass('hidden');
        $('.all_div').css('display','none');
        location.reload();
    });
    $('.btn2').click(function () {
        var code = $('.couponshuru').val().trim();
        if(code == ''){
            alert('券码不能为空！');
            return false;
        }else{
            $.ajax({
                url: '/shop/Couponuse/hexiao',
                data: 'code='+code,
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    $('.container1').addClass('hidden');
                    $('.container2').removeClass('hidden');
                    $('.tips2').text('券码：' + code);
                    if(returnData.status == 200){
                        $('.success').attr('src','__IMG__/result1.png');
                        $('.tips1').text('核销成功');
                    } else {
                        $('.success').attr('src','__IMG__/result2.png');
                        $('.tips1').text(returnData.msg);
                    }
                },
                error: function () {
                    alert('数据出错，请刷新重试');
                }
            })
        }
    });
</script>
